<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Video Intelligence</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content">
            <div class="block block-strong">
              <p><b>Prepaired ad</b>. Ad already prepaired (loaded) and waiting to start playing when required.</p>
              <p><a class="button button-raised show-prepaired">Prepaired Ad</a></p>
            </div>
            <div class="block block-strong">
              <p><b>Create ad and show</b> it at a time.</p>
              <p><a class="button button-raised create-and-show">Create & Show</a></p>
            </div>
            <div class="block block-strong">
              <p><b>Autoplay Fallback</b>. In some cases (like old iOS Safari) video can't be played automatically without user interaction. In this case you may use custom fallback (e.g. to show a Dialog) which will require user interaction to play a video ad.</p>
              <p><a class="button button-raised create-and-show-with-custom-callback">Create & Show With Custom Fallback</a></p>
            </div>
            <div class="block block-strong">
              <p><b>Rewarded Ad</b>. vi API also comes with handy events to check whether the video was fully completed or not. Useful, for example, in case when you need to reward user for watching an ad.</p>
              <p><a class="button button-raised create-and-show-rewarded">Create & Show Rewarded Ad</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7({
        id: 'io.framework7.testapp',
        vi: {
          placementId: 'pltd4o7ibb9rc653x14',
        }
      });
      
      var $$ = Dom7;
      
      // Create prepaire ad
      var prepairedAd;
      if (!app.vi.sdkReady) {
        app.on('viSdkReady', function () {
          prepairedAd = app.vi.createAd({
            autoplay: false,
          });
        })
      } else {
        prepairedAd = app.vi.createAd({
          autoplay: false,
        });
      }
      
      // Show prepaired ad
      $$('.show-prepaired').on('click', function () {
        prepairedAd.start();
      });
      
      // Create and show ad
      $$('.create-and-show').on('click', function () {
        app.vi.createAd();
      });
      
      // With custom autplay fallback
      $$('.create-and-show-with-custom-callback').on('click', function () {
        app.vi.createAd({
          fallbackOverlay: false,
          on: {
            autoplayFailed() {
              const ad = this;
              app.dialog.alert('Check out this awesome ad', () => {
                ad.start();
              })
            }
          }
        });
      });
      
      // Create and show rewarded ad
      $$('.create-and-show-rewarded').on('click', function () {
        app.vi.createAd({
          autoplay: false,
          on: {
            ready() {
              const ad = this;
              app.dialog.alert('Check out this awesome ad to get the reward', () => {
                ad.start();
              })
            },
            complete() {
              app.dialog.alert('Congrats! You got the reward!')
            },
            userexit() {
              app.dialog.alert('Sorry, no reward for you!')
            },
          }
        });
      });
    </script>
  </body>
</html>